<script setup lang="ts">
import { download, get, loadFile, message, post, checkBtnPermission } from '@/utils'
import Modal from './components/MsgModal.vue'
import { BtnPermission } from '@/enum/permission'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-base/admin/notice/template/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const columns = formatColumns([
  {
    title: 'ID',
    dataIndex: 'id',
    width: 200,
  },
  {
    title: '通知类型',
    dataIndex: 'type',
    width: 200,
    valueEnum: {
      orderPay: { text: '订单支付通知' },
      orderSendOut: { text: '订单发货通知' },
      orderReceipt: { text: '确认收货通知' },
      orderRefund: { text: '订单售后通知' },
      userBinding: { text: '新客绑定通知' },
      brokerage: { text: '佣金待入账通知' },
      sellerAudit: { text: '商户审核通知' },
      placeAudit: { text: '分销员审核通知' },
    },
  },
  { title: '通知场景说明', dataIndex: 'explains', width: 200 },
  {
    title: '标识',
    dataIndex: 'address',
    width: 200,
  },

  {
    title: '公众号模版',
    dataIndex: 'isMp',
    width: 200,
  },
  {
    title: '小程序订阅',
    dataIndex: 'isMa',
    width: 200,
  },
  {
    title: '发送短信',
    dataIndex: 'isSms',
    width: 200,
  },
  {
    title: '操作',
    dataIndex: 'options',
    width: 200,
    fixed: 'right',
    btnList: [
      {
        permission: BtnPermission.编辑,
        name: '详情',
        handle: ({ record }) => store.handleShow(record),
      },
    ],
  },
])
const changeShow = (id, key, status) => {
  if (!checkBtnPermission(BtnPermission.编辑)) return false
  post({ url: '/server-base/admin/notice/template/update', data: { id, [key]: status } }, ({ code, msg }) => {
    if (code == 200) actionRef.value.reload()
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" column-resizable :scroll="{ x: 1000 }" :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <!-- <component :is="dom[1]" />
        <component :is="dom[0]" /> -->
      </template>
      <template #isMa="{ record }">
        <span v-if="record.isMa == -1">-</span>
        <a-switch v-else v-model="record.isMa" :checked-value="1" :unchecked-value="0" :before-change="val => changeShow(record.id, 'isMa', val)">
          <template #checked> 启用 </template>
          <template #unchecked> 禁用 </template>
        </a-switch>
      </template>
      <template #isMp="{ record }">
        <span v-if="record.isMp == -1">-</span>
        <a-switch v-else v-model="record.isMp" :checked-value="1" :unchecked-value="0" :before-change="val => changeShow(record.id, 'isMp', val)">
          <template #checked> 启用 </template>
          <template #unchecked> 禁用 </template>
        </a-switch>
      </template>
      <template #isSms="{ record }">
        <span v-if="record.isSms == -1">-</span>
        <a-switch v-else v-model="record.isSms" :checked-value="1" :unchecked-value="0" :before-change="val => changeShow(record.id, 'isSms', val)">
          <template #checked> 启用 </template>
          <template #unchecked> 禁用 </template>
        </a-switch>
      </template>
    </ProTable>
    <Modal v-if="store.show" v-model:show="store.show" :id="store.id" @confirm="actionRef.reload" />
  </div>
</template>
